<template>
  <div id="shortcuts-wrapper">
    <div class="show-shortcuts">
      <ShortcutsGroup v-show="!useStore.isApp" />
      <ShortcutsExtend v-show="useStore.isApp" />
    </div>
    <ShortcutsSwitching @click.stop @contextmenu.stop.prevent v-if="!mobile" />
    <LayoutAddUrl v-if="useStore.showAddUrlWindow" />
    <LayoutChangeUrl v-if="useStore.showChangeUrlWindow" />
  </div>
</template>

<script setup>
import ShortcutsGroup from "@/views/home/childComponents/ShortcutsGroup.vue";
import ShortcutsExtend from "./ShortcutsExtend.vue";
import ShortcutsSwitching from "./ShortcutsSwitching.vue";
import LayoutAddUrl from "@/views/home/childComponents/LayoutAddUrl.vue";
import LayoutChangeUrl from "@/views/home/childComponents/LayoutChangeUrl.vue";
import { useHomeStore } from "@/stores/home";
import {inject} from "vue";

const mobile = inject('mobile')
const useStore = useHomeStore();
</script>

<style lang="less" scoped>
#shortcuts-wrapper {
  position: relative;
  z-index: 9;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .show-shortcuts {
    max-width: 580px;
    width: 100%;
    height: 316px;
  }

  @media screen and (max-width: 768px) {
    .show-shortcuts {
      max-width: 464px;
    }
  }

  @media screen and (max-width: 568px) {
    .show-shortcuts {
      max-width: 348px;
    }
  }
  // @media screen and (max-width: 400px) {
  //   .show-shortcuts {
  //     max-width: 300px;
  //   }
  // }
}
</style>

<style>
.list-group>li {
  margin: 10px 18px;
}
@media screen and (max-width: 365px) {
  .list-group{
    padding-left: 7px;
  }
  
}
</style>